<%--
  Created by IntelliJ IDEA.
  User: SXT
  Date: 2020/6/29
  Time: 11:41
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>菜单管理页面</title>
    <base href="<%=request.getContextPath()+"/"%>">
    <%--引入easyui主题的css样式--%>
    <link rel="stylesheet" href="easyui/themes/default/easyui.css">
    <%--引入easyui中图标集的css样式--%>
    <link rel="stylesheet" href="easyui/themes/icon.css">
    <%--引入demo.css--%>
    <link rel="stylesheet" href="easyui/themes/demo.css">
    <%--引入jq中js文件  注意：先引入jq中js在引入easyui中js--%>
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <%--引入easyui中核心js文件--%>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>

    <script type="text/javascript">

          $(function () {
              $('#dg').datagrid({
                  url:'menu/findAllMenu',
                  pagination:true,//设置分页栏展示
                  rownumbers:true,//设置行号显示
                  pageSize:5,//设置size的初始大小
                  pageList:[5,10,15,20],// 设置每一页显示条数列表
                  toolbar:"#tb",
                  columns:[[
                      {field:'mid',title:'菜单ID',width:150,align:'center'},
                      {field:'mname',title:'菜单名称',width:150,align:'center'},
                      {field:'url',title:'菜单URL',width:150,align:'center'},
                      {field:'mdesc',title:'菜单描述',width:150,align:'center'}
                  ]]
              });
          })
          var url="";
        //添加菜单对话框的实现
        function newMenus() {
              //打开当前对话框
            $("#dlg").dialog("open").dialog("setTitle","New Menus");
            //清空之前表单数据
            $("#fm").form("clear");
            //给当前pid赋予初始值
            $("#pid").val(0);
            //给提示赋予初始化值
            $("#pid_name").text("默认添加一级菜单");

            url="menu/insertMenu";


        }
        //选择父节点对话框的展现
        function checkPid() {
              //打开父节点选择的对话框
            $("#pid_dlg").dialog("open").dialog("setTitle","chect parent");

        }
        //选择父节点事件的增加
      $(function () {
          $('#tt').tree({
              onDblClick: function(node){
                 //获取当前节点的id
                $("#pid").val( node.id) ;
                  //把当前节点赋值给span
                  $("#pid_name").text(node.text())
                  //关闭当前对话框
                  $("#pid_dlg").dialog("close")

              }
          });
       })
        //提交表单的实现
        function saveMenu() {
            $.post(url,$("#fm").serialize(),function (result) {
                if (result>0){
                    //关闭当前对话框
                    $("#dlg").dialog("close");
                    //重新加载数据网格
                    $("#dg").datagrid("reload");
                    //重新加载树形展现
                    $("#tt").tree("reload");
                }
            })
        }
        //修改菜单对话框
        function editMenus() {
            //选择数据
            var row = $("#dg").datagrid("getSelected");
            console.log(row);
            if(row){
                //打开对话框
                $("#dlg").dialog("open").dialog("setTitle","Edit Menu");
                //数据进行回显
                $("#fm").form("load",row);

                $("#pid_name").text("默认当前父节点");
                url="menu/changMenu?mid="+row.mid;
            }

        }
        //删除菜单的实现
          function removeMenus() {
              //选中某一数据
              var row = $("#dg").datagrid("getSelected");
              if(row){
                  //提示是否删除
                  $.messager.confirm("提示","是否删除该数据",function (f) {
                      if(f){
                          $.post("menu/removeMenu",{mid:row.mid},function (result) {
                              if(result>0){
                                  //重新加载数据网格
                                  $("#dg").datagrid("reload");
                              }else  if(result==-1){
                                  $.messager.alert("提示","当前节点下有子节点,删除失败","info");
                              }else {
                                  $.messager.alert("提示","删除失败","error");
                              }
                          })
                      }
                  })

              }

          }


    </script>

</head>
<body>

<div style="width: 800px;height: 600px" class="easyui-panel" title="菜单管理">

    <div style="width: 750px;height: 400px;border: 0px solid red;margin: 0px auto;margin-top: 30px">

        <table id="dg" style="width: 750px;height: 400px"></table>

        <%--工具栏设置--%>
        <div id="tb">
            <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newMenus()">添加菜单</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editMenus()">编辑菜单</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="removeMenus()">删除菜单</a>
        </div>
    </div>


    <%--添加菜单对话框的展示--%>
    <div id="dlg" class="easyui-dialog" style="width:400px" data-options="closed:true,modal:true,border:'thin',buttons:'#dlg-buttons'">
        <form id="fm" method="post" novalidate style="margin:0;padding:20px 50px">
            <h3>Menu  Information</h3>
            <div style="margin-bottom:10px">
                <input name="mname" class="easyui-textbox" required="true" label="菜单名称:" style="width:100%">
            </div>
            <div style="margin-bottom:10px">
                父节点选择: <a href="javascript:void(0)" onclick="checkPid()" class="easyui-linkbutton c6" iconCls="icon-reload" style="width:90px">check</a>

                <span id="pid_name">默认添加一级菜单</span>
                <input type="text" name="pid" id="pid" >
            </div>
            <div style="margin-bottom:10px">
               是否打开：
                <input class="easyui-radiobutton" name="status" value="1" label="是:">

                <input class="easyui-radiobutton" name="status" value="0" label="否:">
            </div>
            <div style="margin-bottom:10px">
                <input name="url" class="easyui-textbox" required="true" label="菜单地址:" style="width:100%">
            </div>
            <div style="margin-bottom:10px">
                <input name="mdesc" class="easyui-textbox" required="true" label="菜单描述:" style="width:100%">
            </div>
        </form>
    </div>
    <div id="dlg-buttons">
        <a href="javascript:void(0)" class="easyui-linkbutton c6" iconCls="icon-ok" onclick="saveMenu()" style="width:90px">Save</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')" style="width:90px">Cancel</a>
    </div>

    <%--父节点选择的对话框--%>
    <div id="pid_dlg" class="easyui-dialog" style="width:400px;height: 500px" data-options="closed:true,modal:true,border:'thin'">
        <ul id="tt" class="easyui-tree" url="menu/findMoreMenu2">

        </ul>

    </div>

</body>

</html>
